<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目详情页</title>
{#    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">#}
{#    lightbox#}
    <link rel="stylesheet" href="/static/lightbox/node_modules/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/static/lightbox/node_modules/prismjs/themes/prism-tomorrow.css"/>
</head>
<body>
    {% include "menu.html" %}

    <table class="table table-bordered table-striped table-condensed" style="width: 80%; margin-left: 10%; " >
        <thead style="background-color: #050546; color: aliceblue">
            <th>Mock单元</th>
            <th>状态</th>
            <th>操作</th>
        </thead>
        <tbody>
            {% for i in mocks %}
                <tr>
                <td>
                    {{ i.name }}
                </td>
                <td id="state_{{ i.id }}">
                    {{ i.status}}
                </td>
                <td>
                    <a href="/mock_enable/{{ i.id }}">启用</a>
                    <a href="/mock_disable/{{ i.id }}">弃用</a>
                    <a href="javascript: mock_set({{ i.id }})">设置</a>
                    <a href="/del_mock/{{ i.id }}" onclick="return del_mock()">删除</a>
                </td>
                </tr>
                <script>
                    state_color = document.getElementById('state_{{ i.id }}')
                    if('{{ i.status }}' == 'True'){
                        state_color.style.color = 'green'
                    }else{
                        state_color.style.color = 'red'
                    }
                </script>
            {% endfor %}
        <script>
            function del_mock(){
                var message = confirm('确定要删除此mock单元')
                if (message ==true){
                    return true
                }else {
                    return false
                }
            }

        </script>
        </tbody>
    </table>

{#lightbox#}

    <script src="/static/lightbox/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/lightbox/js/bootstrap-show-modal.js"></script>
    <script src="/static/lightbox/node_modules/prismjs/prism.js"></script>
    <script>
        function project_set(){
        $.showModal({
            title: '修改项目名称',
            body:
                '<form><div class="form-group row">' +
                '<div class="col-3"><label for="text" class="col-form-label">项目标题</label></div>' +
                '<div class="col-9"><input type="text" class="form-control" id="project_new_name"/></div>' +
                '</div>' +
                '</form>',
            footer: '<button type="button" class="btn btn-link" data-dismiss="modal">取消</button><button type="submit" class="btn btn-primary">确认</button>',
            onCreate: function (modal) {
                // create event handler for form submit and handle values
                $(modal.element).on("click", "button[type='submit']", function (event) {
                    event.preventDefault()
                    var $form = $(modal.element).find("form")
                    {#发送给后端#}
                    $.get('/project_set/',{
                        'project_new_name': $form.find("#project_new_name").val(),
                        'project_id': {{ project_id }}
                    },function (ret){
                        document.location.reload()
                    })

                    modal.hide()
                })
            }
        })
    }
        function mock_set(mock_id){
            $.get('/get_mock/',{
                'mock_id': mock_id
            },function (ret){

                $.showModal({
            title: '修改mock单元',
            body:
                '<form><div class="form-group row">' +
                '<div class="col-3"><label for="text" class="col-form-label">Mock名称</label></div>' +
                '<div class="col-9"><input type="text" class="form-control" value="'+ret.mock.name+'" id="mock_name" /></div>' +
                '</div>' +
                '<div class="form-group row">' +
                '<div class="col-3"><label for="text" class="col-form-label">抓包url</label></div>' +
                '<div class="col-9"><input type="text" class="form-control" value="'+ret.mock.catch_url+'" id="mock_catch_url" placeholder="通过url关键字匹配"/></div>' +
                '</div>'+
                '<div class="form-group row">' +
                '<div class="col-3"><label for="text" class="col-form-label">返回值更新策略</label></div>' +
                '<div class="col-9"><textarea id="mock_response_body" rows="5" class="form-control" placeholder="规则如下：' +
                '字符串替换：旧值=>新值   ' +
                'json替换：json路径=值，如data.sid=2">'+ret.mock.response_body+'</textarea></div>' +
                '</div>'+
                '</form>',

            footer: '<button type="button" class="btn btn-link" data-dismiss="modal">取消</button><button type="submit" class="btn btn-primary">确认</button>',
            onCreate: function (modal) {
                // create event handler for form submit and handle values
                $(modal.element).on("click", "button[type='submit']", function (event) {
                    event.preventDefault()
                    var $form = $(modal.element).find("form")
                    {#发送给后端#}
                    $.get('/mock_set/',{
                        'mock_id': mock_id,
                        'mock_name': $form.find("#mock_name").val(),
                        'mock_catch_url': $form.find("#mock_catch_url").val(),
                        'mock_response_body': $form.find("#mock_response_body").val(),

                    },function (ret){
                        modal.hide()
                        document.location.reload()
                    })


                })
            }
        })
            })
        }
    </script>

</body>
</html>